<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../Scripts/jquery.min.js"></script>
<script type="text/javascript" src="../Scripts/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../Scripts/bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="../Scripts/vue.min.js"></script>
<link rel="stylesheet" href="../Scripts/layui/css/layui.css">
<script type="text/javascript" src="../Scripts/layui/layui.js"></script>
<title>Insert title here</title>
</head>
<style type="text/css">
	#box{
		margin-left: auto;
		margin-right: auto;
		padding:50px;
		border: solid 3px gray; 
		
	}
	
</style>
<script type="text/javascript">

function deleteId(id){
	
	$("#delId").val(id);
}
//回显
function updateId(id){
	$("#updateId").val(id);
	$.ajax({
		url:'../selectUpdateRoleById',
		data:{roleId:id},
		dataType:'json',
		success:function(res){
			
			$("#rolenameU").val(res.role.rolename);
			$("#sortnumU").val(res.role.sortnum);
		}
	})
}
</script>
<body>

<div>系统设置>角色管理</div>
<hr>
 <div id="box" style="width:60%" >
<table class="table  table-bordered" style="text-align: center">
 		<tr>角色列表<div align="right" ><a data-toggle="modal" data-target="#myModal"><i class="layui-icon" style="font-size: 15px; color: #1E9FFF;">&#xe654;添加</i></a></div></tr>
 		<hr>
 		<tr class="success" >
					<td>排序</td>
					<td>ID</td>
					<td>名称</td>
					<td >操作</td>
		</tr>
		<tr v-for="(index,list) in roleList">
			<td>{{index+1}}</td>
			<td>{{list.roleid}}</td>
			<td>{{list.rolename}}</td>
			<td><a href=""><i class="layui-icon" style="font-size: 20px; color: #1E9FFF;">&#xe631;</i></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span data-toggle="modal"  data-target="#MyModalUp" onclick="updateId({{list.roleid}})"><i class="layui-icon" style="font-size: 20px">&#xe642;</i></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span data-toggle="modal" data-target="#MyModalDel"  onclick="deleteId({{list.roleid}})"><i class="layui-icon" style="font-size: 20px;">&#xe640;</i></span></td>
			
		</tr>
 	</table>
 <!-- 编辑 -->
<div class="modal fade" id="MyModalUp" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">编辑角色</h4>
      </div>
      <div class="modal-body">
      
      <form>
      
      	<input type="hidden" name="cid" id="updateId" value="">
       		   <div class="layui-form-item">
    <label class="layui-form-label">角色:</label>
    <div class="layui-input-block">
      <input type="text" name="role" id="rolenameU" required  lay-verify="required" placeholder="请输入角色名称" autocomplete="off" class="layui-input">
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">排序:</label>
    <div class="layui-input-block">
      <input type="text" name="role" id="sortnumU" required  lay-verify="required" placeholder="请输入位置序号" autocomplete="off" class="layui-input">
    </div>
  </div>
      </form>	
      
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" lay-submit lay-filter="formDemo"  v-on:click="updateSubmit()">确定</button>
      </div>
    </div>
  </div>
</div>
 </div>	
 	<!-- 新增 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">添加角色</h4>
      </div>
      <div class="modal-body">
      
      <form>
       		   <div class="layui-form-item">
    <label class="layui-form-label">角色:</label>
    <div class="layui-input-block">
      <input type="text" name="role" id="rolename" required  lay-verify="required" placeholder="请输入角色名称" autocomplete="off" class="layui-input">
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">排序:</label>
    <div class="layui-input-block">
      <input type="text" name="role" id="sortnum" required  lay-verify="required" placeholder="请输入位置序号" autocomplete="off" class="layui-input">
    </div>
  </div>
      </form>	
      
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" lay-submit lay-filter="formDemo"  v-on:click="applySubmit()">确定</button>
      </div>
    </div>
  </div>
</div>
 </div>
  <!--删除确认对话框-->
 	<div class="modal fade" id="MyModalDel" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		data-backdrop="static" 禁止点击弹框后面内容
		<form class="form-horizontal" role="form">
			<div class="modal-dialog modal-sm ">
			
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">提示信息</h4>
					</div>
					<input type="hidden" name="cid" id="delId" value="">
					<div class="modal-body" style="text-align: left;">
						<h5>您确定要删除当前信息吗？</h5>
					</div>
					<div class="modal-footer">
						
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">取消
                    </button>
                    
						<button type="button" class="btn btn-primary"  v-on:click="deleteRole()" >
							确认</button>
						
					</div>
				</div>
			</div>
		</form>
	</div>
 	
</div>

</body>
 <script type="text/javascript">
	new Vue({
		el:"#box",
		data:{
			roleList:'',
		},
		methods:{
//修改角色
			updateSubmit:function(){
			
				var rolename=$("#rolenameU").val();
				var sortnum=$("#sortnumU").val();
				var dom=this;
				$("#MyModalUp").modal("hide");
				var roleId=$("#updateId").val()
				$.ajax({
					url:'../updateRoleById',
					data:{roleid:roleId,rolename:rolename,sortnum:sortnum},
					dataType:'text',
					success:function(res){
						dom.roleLis();
					}
				})
				
			},
//删除角色
			deleteRole:function(){
				var dom=this;
				var roleId=$("#delId").val()
			
				$("#MyModalDel").modal("hide");
				$.ajax({
					url:'../deleteRoleById',
					data:{roleId:roleId},
					dataType:'text',
					success:function(res){
						dom.roleLis();
					}
				})
			},
//增加一个角色		
			applySubmit:function(){
				var dom=this;
				var rolename=$("#rolename").val();
				var sortnum=$("#sortnum").val();
				$("#myModal").modal("hide");
				var dom=this;
				$.ajax({
					url:'../insertRole',
					data:{rolename:rolename,sortnum:sortnum},
					type:'post',
					dataType:'text',
					success:function(res){
						dom.roleLis();
						
					}
				})
			},
//获取全部角色
			roleLis:function(){
				var dom=this;
				$.ajax({
					url:'../selectAllRoleList',
					dataType:'json',
					success:function(res){
						dom.roleList=res.allRoleList;
					}
				})
				//回显
				
			}
		},
		
		created:function(){
			this.roleLis();
			
		},
		
	})
	layui.use('form', function(){
		  var form = layui.form;
		  
		  //监听提交
		  form.on('submit(formDemo)', function(data){
		    layer.msg("编辑成功");
		    return false;
		  });
	});
</script>
</html>